import React, { useState, useMemo, useEffect } from 'react';
import TodoHeader from './components/TodoHeader';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';
import { getTodos } from './api/todos';
import TodoContext from './context';

const DefaultTodos = [
  { id: 1, title: '吃饭', completed: false },
  { id: 2, title: '睡觉', completed: false },
  { id: 3, title: '娱乐', completed: true },
];

function App() {
  const [todos, setTodos] = useState(DefaultTodos);

  // 增加 todo 项
  const addTodoItem = (title) => {
    const newTodoItem = { id: Math.random(), title, completed: false };
    setTodos([newTodoItem, ...todos]);
  };

  // 切换 todo 项状态
  const toggleTodoItem = (id) => {
    const newTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
    setTodos(newTodos);
  };

  // 删除 todo 项
  const removeTodoItem = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  };

  // 已完成数量
  const hanDoneNum = useMemo(() => {
    return todos.filter((todo) => todo.completed).length;
  }, [todos]);

  // 未完成数量
  const hanUnDoneNum = useMemo(() => {
    return todos.filter((todo) => !todo.completed).length;
  }, [todos]);

  // 初始化
  useEffect(() => {
    getTodos().then((res) => {
      setTodos(res);
    });
  }, []);

  return (
    <TodoContext.Provider
      value={{
        todos,
        addTodoItem,
        toggleTodoItem,
        removeTodoItem,
        hanDoneNum,
        hanUnDoneNum,
      }}
    >
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
        <TodoHeader />
        <TodoInput />
        <TodoList />
      </div>
    </TodoContext.Provider>
  );
}

export default App;
